<template>
  <ul class="file-listview">
    <li class="file-listitem" v-for="(item, i) in props.data" :key="i">
      <div class="th">
        <i :class="item.icon"></i>
      </div>
      <div class="info">
        <h4><xui-link :text="item.name" @click="viewClick(item)"></xui-link></h4>
        <p>
          <span class="lastUpdate">{{ item.lastUpdate }}</span><span class="size">{{ item.sizeStr }}</span>
        </p>
      </div>
      <div class="detail">
        <drop-menu>
          <a><i :class="detail_icon"></i></a>
          <template #menu>
            <xui-menu-item v-for="(m, i) in menus" :key="i" :icon="m.icon" @click="() => m.click(item)">{{ m.text }}</xui-menu-item>            
          </template>
        </drop-menu>
      </div>
    </li>
    <preview-box @register="regPreview"></preview-box>
  </ul>
</template>




<script lang="ts" setup>
import { PropType, ref } from "vue"
import { useRouter } from 'vue-router'
import XuiLink from '/@/components/XUII/link.vue'
import DropMenu from "/@/components/XUII/dropMenu.vue"
import XuiMenuItem from "/@/components/XUII/menus/menuItem.vue"
import icon from "/@/components/XUII/icon/index"
import { FileExtInfo } from '/@/utils/FileHelper'
import PreviewBox from '/@/components/preview/index.vue'
import fs from '/@/services/FileService'

import message from "/@/components/XUII/dialog/message"

const props = defineProps({
  data: {
    type: Object as PropType<FileExtInfo[]>,
    default: () => null,
  },
});


const myRouoter = useRouter()

const emits = defineEmits(['change'])

const detail_icon = icon.nf_fa_ellipsis_v;

const menus = [
  {
    icon: icon.nf_cod_open_preview,
    text: '查看',
    click: (f:FileExtInfo) => {}
  },
  {
    icon: icon.nf_mdi_rename_box,
    text: '重命名',
    click: (f: FileExtInfo) => {
      message.prompt("输入", "重命名", f.name).then(async (new_value:string) => {        
        await fs.rename(f.fullName.replace(f.name,''), f.name, new_value)    
        emits('change')  
      })
    }
  },
  {
    icon: icon.nf_cod_cloud_download,
    text: '下载',
    click: (f:FileExtInfo) => {}
  },
  {
    icon: icon.nf_cod_copy,
    text: '复制',
    click: (f:FileExtInfo) => {}
  },
  {
    icon: icon.nf_cod_move,
    text: '移动',
    click: (f:FileExtInfo) => {}
  },
  {
    icon: icon.nf_mdi_delete,
    text: '删除',
    click: (f:FileExtInfo) => {}
  }
]

let openPreview = (ext:FileExtInfo)=>{}

const regPreview = (ins: any) => {
  openPreview = ins.open
}


const viewClick = async (f: FileExtInfo) => {
  if (f.isDir) {
    myRouoter.push(`/home?dir=${f.fullName}`)
  } else if (f.ext === 'pdf') {
    let { href } = myRouoter.resolve({ name: 'reader_pdf', query: { path: f.fullName } })
    window.open(href, '_blank')
  } else if (f.ext === 'epub') {
    let { href } = myRouoter.resolve({ name: 'reader_epub', query: { path: f.fullName } })
    window.open(href, '_blank')
  } else if(f.ext === 'txt' || f.ext === 'md') {    
    openPreview(f)    
  } else if (f.ext === 'md') {
    let { href } = myRouoter.resolve({ name: 'reader_markdown', query: { path: f.fullName } })
    window.open(href, '_blank')
  }
}


</script>


<style lang="scss" scoped>
.file-listview {
  width: 100%;
  border-top: 1px solid #ccc;

  .file-listitem {
    border-bottom: 1px solid #ccc;
    list-style: none;    
    display: flex;    
    cursor: pointer;
    align-items: center;
    padding: 5px 0;

    &:hover {
      background: #E9ECEF;
    }

    .th {      
      font-size: 2.4em;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #179f84;
      height: 100%;
      margin: 5px 0.5em;
    }

    .info {
      flex: 1;
      color: #999;
      h4 {
        margin-bottom: 5px;
      }
      p {
        font-size: 0.9em;
      .lastUpdate {

      }
        .size {
          margin-left: 1em;
        }
      }
    }

    .detail {       
      height: 100%;
      display: flex;
      align-items: center;
      a {
        margin: 5px;
        display: block;
        border-radius: 50%;
        padding: 10px;
        color: #999;
        &:hover {
          color: #5CB85C;
          background-color: #ccc;
        }
      }
    }
  }
}
.txt-view {  
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}
</style>